<template>
	<div id="recharge">
		<div id="header">
			<img @click="$router.go(-2)" src="../../static/img/return.png"/>
			<p>金币充值</p>
		</div>
		<!---------我的金币------------>
		<div class="recharge_1">
			<p>我的金币：</p>
			<p>{{gold}}</p>
		</div>
		<!--------充值播报----------->
		<div class="recharge_notice">
			<img src="../../static/img/home-11.png"/>
			<swiper :options="swiperOption">
				<swiper-slide v-for="item in noticeList">
					<p>[{{item.userInfo.username}}]充值了<span>{{item.money}}金币</span></p>
				</swiper-slide>
			</swiper>
		</div> 
		<!---------选择套餐------------>
		<div class="classify">
			<p class="classify_title">金币充值</p>
			<div class="classify_list">
				<div @click="classify = key+1" v-for="(item,key) in classifyList" :class="classify == key+1?'classify_item classify_active':'classify_item'">
					<p class="gold">{{item.gold}}金币</p>
					<p class="price">¥{{item.price}}</p>
					<img v-show="classify == key+1" src="../../static/img/recharge-02.png"/>
				</div>
				<div @click="classify = 6" :class="classify == 6?'classify_item classify_active':'classify_item'">
					<p class="other" v-if="classify != 6">输入其他</p>
					<div v-else class="classify_other">
						<div>
							<input type="number" v-model="inputGold" />
							<p>金币</p>
						</div>
						<p>¥{{returnFloat(money)}}</p>
					</div>
				</div>
			</div>
			<p class="ratio"><span></span>1人民币=100金币</p>
		</div>
		<!---------支付方式------------>
		<div class="pay">
			<p class="pay_title">支付方式</p>
			<ul class="pay_way">
				<li @click="payWay = 1">
					<p><img src="../../static/img/recharge-03.png"/>余额支付（可用余额{{balance}}元）</p>
					<img v-show="payWay == 1" src="../../static/img/recharge-05.png"/>
				</li>
				<li @click="payWay = 2">
					<p><img src="../../static/img/recharge-04.png"/>微信支付</p>
					<img v-show="payWay == 2" src="../../static/img/recharge-05.png"/>
				</li>
			</ul>
		</div>
		<!-----------支付按钮--------------->
		<input @click="payOpen" id="toPay" type="button" value="立即充值" />
		<!-------输入密码---------->
		<div id="pay_password" v-show="payPassword">
			<div class="pay_password">
				<div class="password_input">
					<p>支付密码：</p>
					<input type="password" v-model="password" placeholder="首次输入为登录密码" />
				</div>
				<div class="pay_btns">
					<input @click="payClose" type="button" value="取消" />
					<input type="button" @click="recharge" value="确定" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import wx from 'weixin-js-sdk'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
	name:'recharge',
	data:function(){
		return{
			gold: '2500',//我的金币
			balance: 0,// 我的余额
			//---------公告列表-----------
			noticeList:[],
			//---------轮播组件-----------
			swiperOption: {
				autoplay: {
				    delay: 5000,
				    stopOnLastSlide: false,
				    disableOnInteraction: true,
			    },
				loop: true,//
				direction : 'vertical',//竖向滚动
				allowTouchMove: false,//禁止触摸滑动
			},
			classify:1,//套餐选择
			//-------套餐列表----------
			classifyList:[
				{
					gold:'1000',//金币数量
					price:'10.00',//价格
				},
				{
					gold:'2000',//金币数量
					price:'20.00',//价格
				},
				{
					gold:'3000',//金币数量
					price:'30.00',//价格
				},
				{
					gold:'5000',//金币数量
					price:'50.00',//价格
				},
				{
					gold:'10000',//金币数量
					price:'100.00',//价格
				},
			],
			inputGold: '0',//用户输入的金币数
			money: 10,//根据用户输入得出的价格
			payWay: 1,//支付方式
			password: '',//支付密码
			payPassword: false,//支付密码弹窗开关
		}
	},
	components: {
	   swiper,
	   swiperSlide
	},
	methods:{
		// ----- 获取我的金币 -----
		getMyCoins: function(){
			var _this = this;
			_this.$axios.post("/user/wallet/getWalletInfo").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.gold = data.result.coins;
					_this.balance = data.result.balance;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		// ----- 获取最新用户充值金币消息 -----
		getNewRecharge: function(){
			var _this = this;
			_this.$axios.post("/user/recharge/selectNewRecharge").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.noticeList = data.result;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		payOpen:function(){//打开支付密码弹窗
			var appId;
			var timeStamp;
			var nonceStr;
			var packageValue;
			var paySign;
			if(this.money==''){
				this.$alert("请正确填写充值的金币数");
				return;
			}
			if(this.payWay == 1){
				if(this.payWay == 1 && this.money > this.balance){
					this.$alert("余额不足");
					return;
				}
				this.payPassword = true;
			}else{
				var _this = this;
				let postData = _this.$qs.stringify({
				    money:_this.money
				});
				_this.$axios.post("/wechat/pay/user/toBuy",postData).then(function(res){
					var data = res.data;
					/*data =JSON.parse(data);*/
					if(data.message=="succ"){
						data = data.result;
						appId = data.appid;
						timeStamp = data.timeStamp;
						nonceStr = data.nonceStr;
						packageValue = data.packageValue;
						paySign = data.sign;
					}else{
						alert(data.result);
					}
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId" : appId, //公众号名称，由商户传入     
						"timeStamp" : timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr" : nonceStr, //随机串     
						"package" : packageValue,
						"signType" : "MD5", //微信签名方式：     
						"paySign" : paySign //微信签名 
					}, function(res) {
						// 使用以下方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							_this.$alert("支付成功");
						} else if (res.err_msg == "get_brand_wcpay_request:fail") {
							_this.$alert('支付失败');
						} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
							_this.$alert('支付取消');
						} else {
							_this.$alert(res.err_msg);
						}
					});
				}).catch(function (error) {
					console.log(error);
				});
			}
			
		},
		payClose:function(){//关闭支付密码弹窗
			this.payPassword = false;
		},
		// ----- 充值 -----
		recharge: function(){
			this.checkPwd();
		},
		// ----- 验证支付密码 -----
		checkPwd: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				password: _this.password
			});
			_this.$axios.post("/user/info/checkPayPwd", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					if(data.result){
						if(_this.payWay == 1){
							// 余额充值
							_this.rechargeByBalance();
						}
					}else{
						_this.$alert("支付密码有误");
					}
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		// ----- 余额充值金币 -----
		rechargeByBalance: function(){
			this.$loading();
			var _this = this;
			let postData = _this.$qs.stringify({
				money: _this.money
			});
			_this.$axios.post("/user/recharge/rechargeByBalance", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.$alert("充值成功");
					// 刷新页面数据
					_this.getMyCoins();
					_this.getNewRecharge();
				}else{
					_this.$alert(data.result);
				}
				$("#loading").remove();
				_this.payPassword = false;
			}).catch(function (error) {
				console.log(error);
				$("#loading").remove();
			});
		},
		//--------小数点后两位不够补零---------------
		returnFloat:function(value){
			var value=Math.round(parseFloat(value)*100)/100;
			var xsd=value.toString().split(".");
			if(xsd.length==1){
				value=value.toString()+".00";
				return value;
			}
			if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			}
		},
		directRightUrl: function() {
			let paths = window.location.href.split('#')
			paths[1] = paths[1] || '/'
			if (paths[0].charAt(paths[0].length - 1) !== '?') {
			    paths[0] = `${paths[0]}?`
			}
			if (paths[1].charAt(0) === '!') {
			    paths[1] = paths[1].substr(1)
			}
			let url = `${paths[0]}#${paths[1]}`
		    if (window.location.href !== url) {
		    	window.location.href = url
		    }
		}
	},
	watch:{
		classify(){
			try{
				this.inputGold = '0'
				this.money = 0;
				this.money = this.classifyList[this.classify - 1].price;
			}catch(e){
				console.log("未填写金币")
			}
			
		},
		inputGold(){
			var reg = /^[+]{0,1}(\d+)$/;
			console.log(this.inputGold)
			// 限制位数
			if(this.inputGold.length > 7){
				this.inputGold = this.inputGold.substring(0,7);
			}
			if(this.inputGold == "" || parseInt(this.inputGold) < 0 || !reg.test(this.inputGold)){
				this.inputGold = ' ';
				this.money = 0;
			}else{
				this.money = this.inputGold/100;
			}
			
		}
	},
	created: function(){
		this.directRightUrl();
		this.getMyCoins();
		this.getNewRecharge();
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#recharge{
	padding: 4rem 0;
	box-sizing: border-box;
}
/*---------我的金币--------*/
.recharge_1{
	background: url('../../static/img/recharge-01.png') no-repeat;
	background-size: 100% 100%;
	height: 7rem;
	display: flex;
	align-items: center;
	color: #FFFFFF;
	padding: 0 1.5rem;
	box-sizing: border-box;
}
.recharge_1 p:first-child{
	font-size: 1.2rem;
}
.recharge_1 p:last-child{
	font-size: 2.4rem;
	margin-left: 1.5rem;
}
/*------------充值播报------------*/
.recharge_notice{
	height: 3rem;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	background-color: #FFFBDB;
	border-bottom: 1px solid #F9D089;
}
.recharge_notice img{
	height: 1.2rem;
	display: block;
	margin-right: 0.5rem;
}
.swiper-container,.swiper-wrapper{
	height: 100%;
	margin: 0;
}
.swiper-slide{
	height: 3rem;
	display: flex;
	align-items: center;
	
}
/*------------选择套餐------------*/
.classify{
	background-color: #fff;
	padding: 0 1.5rem;
	box-sizing: border-box;
}
.classify_title{
	color: #4F4F4F;
	height: 3.6rem;
	line-height: 3.6rem;
	font-size: 1.4rem;
}
.classify_list{
	display: flex;
	flex-wrap: wrap;
}
.classify_item{
	width: 32%;
	height: 5rem;
	margin-right: 2%;
	margin-bottom: 0.5rem;
	border: 1px solid #EEEEEE;
	border-radius: 3px;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.classify_active{
	border: 1px solid #FFA743;
}
.classify_active p{
	color: #FFA743;
	font-size: 1.4rem;
}
.classify_item:nth-child(3n){
	margin-right: 0;
}
.classify_item img{
	position: absolute;
	bottom: 0;
	right: 0;
	height: 1.8rem;
	display: block;
}
.classify_item .gold{
	font-size: 1.4rem;
	color: #4F4F4F;
}
.classify_item .price{
	font-size: 1.2rem;
	color: #787878;
}
.classify_item .classify_other{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.other{
	font-size: 1.4rem;
}
.classify_item .classify_other div{
	display: flex;
	align-items: center;
	justify-content: center;
}
.classify_item .classify_other div input{
	border: none;
	width: 50%;
	background-color: transparent;
	text-align: center;
	color: #FFA743;
	font-size: 1.4rem;
}
.classify_item .classify_other>p{
	text-align: center;
	font-size: 1.2rem;
}
.classify .ratio{
	height: 3.6rem;
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	color: #787878;
}
.classify .ratio span{
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background-color: #FF6565;
	display: block;
	margin-right: 0.5rem;
}
/*-------支付方式--------*/
.pay{
	background-color: #fff;
	padding-bottom: 2rem;
	margin-top: 1rem;
}
.pay_title{
	height: 3.6rem;
	line-height: 3.6rem;
	font-size: 1.4rem;
	color: #4F4F4F;
	padding-left: 1.5rem;
	box-sizing: border-box;
}
.pay_way li{
	height: 3.2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1.5rem;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
}
.pay_way li img{
	height: 1.4rem;
	display: block;
}
.pay_way li p{
	display: flex;
	align-items: center;
	color: #787878;
	font-size: 1.2rem;
	white-space: nowrap;
}
.pay_way li p img{
	margin-right: 0.5rem;
}
/*------支付按钮-------*/
#toPay{
	width: 100%;
	height: 4rem;
	background-color: #FF6565;
	color: #FFFFFF;
	border: none;
	position: fixed;
	bottom: 0;
	left: 0;
	font-size: 1.4rem;
}
/*---------输入密码----------*/
#pay_password{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 11;
}
.pay_password{
	width: 90%;
	background-color: #fff;
	border-radius: 3px;
	margin-top: -10%;
	overflow: hidden;
}
.password_input{
	background-color: #F6F6F6;
	color: #4f4f4f;
	display: flex;
	align-items: center;
	height: 6rem;
	justify-content: center;
	font-size: 1.2rem;
}
.password_input input{
	width: 50%;
	height: 3rem;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
}
.pay_btns{
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pay_btns input{
	width: 10rem;
	height: 3rem;
	border-radius: 50px;
	color: #FFFFFF;
	border: none;
}
.pay_btns input:first-child{
	background-color: #CBCBCB;
	margin-right: 5%;
}
.pay_btns input:last-child{
	background-color: #FEAA21;
}
</style>
